<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格</title>
</head>
<body>
    <h4>表格的主要作用</h4>
    <p>结构清晰，展示数据，不是布局页面。<br>
        有行的概念没有列的概念，多了一个单元格的概念<br>
        th 表头单元格，内容会自动加粗居中显示<br>
        align 表格对齐方式，cellspacing 单元格间的距离，cellpadding 单元格内部间距<br>
        td*6 快速生成6个单元格
         
    </p>
    <table>
        <tr>
            <td>4</td><td>9</td><td>2</td>
        </tr>
        <tr>
            <td>3</td><td>5</td><td>7</td>
        </tr>
        <tr>
            <td>8</td><td>1</td><td>6</td>
        </tr>
    </table>
<p>个人信息表</p>
<table align="center" border="1" cellpadding="5" cellspacing="0">
    <tr>
        <th>姓名</th><th>性别</th><th>年龄</th>
    </tr>
    <tr><td>张十三</td><td>男</td><td>18</td></tr>
    <tr><td>李思思</td><td>女</td><td>19</td></tr>
</table>
    <p>小说排行榜</p>
<table align="center" border="1" cellpadding="5" cellspacing="0">
    <tr>
        <th>排名</th><th>关键词</th><th>趋势</th> <th>今日搜索</th><th>近七日</th><th>链接</th>
    </tr>
    <tr>
        <td>1</td>
        <td>鬼吹灯</td>
        <td><img src="img/collection.png" alt="" srcset=""></td>
        <td>18</td>
        <td>35</td>
        <td><a href="#">贴吧</a></td>
    </tr>
    <tr>
        <td>1</td>
        <td>鬼吹灯</td>
        <td><img src="img/collection.png" alt="" srcset=""></td>
        <td>18</td>
        <td>35</td>
        <td><a href="#">贴吧</a></td>
    </tr>
    <tr>
        <td>1</td>
        <td>鬼吹灯</td>
        <td><img src="img/collection.png" alt="" srcset=""></td>
        <td>18</td>
        <td>35</td>
        <td><a href="#">贴吧</a></td>
    </tr>
</table>

<h4>表格结构标签</h4>
thead 和 tbody 能是语义更加清晰
<table>
<thead>
    <tr>
        <th>排名</th><th>关键词</th><th>趋势</th> <th>今日搜索</th><th>近七日</th><th>链接</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>1</td>
        <td>鬼吹灯</td>
        <td><img src="img/collection.png" alt="" srcset=""></td>
        <td>18</td>
        <td>35</td>
        <td><a href="#">贴吧</a></td>
    </tr>
    <tr>
        <td>1</td>
        <td>鬼吹灯</td>
        <td><img src="img/collection.png" alt="" srcset=""></td>
        <td>18</td>
        <td>35</td>
        <td><a href="#">贴吧</a></td>
    </tr>
    <tr>
        <td>1</td>
        <td>鬼吹灯</td>
        <td><img src="img/collection.png" alt="" srcset=""></td>
        <td>18</td>
        <td>35</td>
        <td><a href="#">贴吧</a></td>
    </tr>
</tbody>
</table>
<h4>合并单元格</h4>
<p>目标单元格</p>
跨行：最上侧单元格为目标单元格，写合并代码<br>
跨列：最左侧单元格为目标单元格，写合并代码<br>
<p>合并三部曲</p>
1.先确定是跨行还是跨列<br>
2.确定目标单元格，写入合并代码 colspan或rowspan<br>
3.删除多余的单元格<br>
<table height="200" width="300" cellspacing="0" border="1">
    <tr>
        <td></td>
        <td colspan="2"></td>
        <!-- <td></td> -->
    </tr>
    <tr>
        <td rowspan="2"></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>

</table>
<h4>无序列表</h4>
<p>内容整齐有序，用来样式布局的<br>
    一个ul包含多个li标签 <br>
    ul标签只能包含li标签，文字或内容不能放在ul内只能放在li标签中，放在li外的文字不会添加样式<br>
    li标签自带样式，一般不常用，会在css中去掉<br>
</p>
<ul>
    这里有内容
    <li>无序列表</li>
    <li>有序列表</li>
    <li>自定义列表</li>

</ul>
<h4>有序列表</h4>
<p>使用ol标签，内部包含多个li标签，其他和ul相似，开发中使用不多</p>
<ol>
    <li>新浪</li>
    <li>搜狐</li>
    <li>腾讯</li>
    这里有内容
</ol>

<h4>自定义列表</h4>
<p>一般是一个大标题，下面有很多小标题，属于包含关系，没有项目符号，</p>
<dl>
    <dt>关注我们</dt>
    <dd>新浪微博</dd>
    <dd>官方微信</dd>
    <dd>联系我们</dd>
</dl>
<h3>表单</h3>
<p>为了收集用户信息，供用户填写使用，表单域是from。</p>
<form action="提交的后台地址。demo.php" method="get" name="表1">
    用户名：<input type="text" name="username" minlength="6" maxlength="12" placeholder="请输入用户名"> <br>
    密码：<input type="password" name="password"> <br>
    <!-- 单选按钮需要设置相同的name属性才能实现单选的功能 -->
    性别：男<input type="radio" name="sex" id="" checked="checked">女<input type="radio" name="sex" id=""> <br>
    爱好：音乐<input type="checkbox" name="" id=""> 电影<input type="checkbox" name="" id="" checked="checked"> 旅行<input type="checkbox" name="" id=""><br>
    <input type="submit" value="免费注册"> 
    <input type="reset" value="重置">
    <input type="date"> 
    <input type="color">
    <input type="button" value="获取短信验证码"><br>
    上传头像：<input type="file" name="" id="">
</form>
<h4>标签</h4>
性别：<label for="man">男</label><input type="radio" name="sex" id="man" checked="checked" >女<input type="radio" name="sex" id=""> <br>
<p>label标签能通过for属性和相邻的标签绑定为一个整体，增大响应窗口</p>
<h4>下拉表单</h4>
<p>不占用页面空间，可指定内容，省份选择</p>
户籍：
<select name="location" id="">
    <option value="">北京</option>
    <option value="">上海</option>
    <option value="">深圳</option>
    <option value="" selected="selected">武汉</option>
</select>
Safari桌面端浏览器目前并不支持time输入框
<input type="datetime" name="user_date" />
<input type="time" name="user_date" />

<h4>textarea 文本域</h4>
<p>可用来填写反馈内容，填写的内容比input多，一般较少使用自带属性，都是通过CSS来修改样式的</p>
<form action="">
    今日反馈：
    <textarea name="ta" id="" cols="30" rows="3">反馈内容若需要回复，请留下您的常用联系方式</textarea>
</form>
</body>
</html>